<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/cupertino/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script>
$(function() {
$( "#accordion1" ).accordion({
collapsible: true,
active: true,
heightStyle: "content",
beforeActivate: function( event, ui ) {}
});
$( "#accordion1" ).on( "accordionbeforeactivate", function( event, ui ) {
	$( "#accordion2" ).accordion({active: false});
	$( "#accordion3" ).accordion({active: false});
} );
});

$(function() {
$( "#accordion2" ).accordion({
collapsible: true,
active: false,
heightStyle: "content",
beforeActivate: function( event, ui ) {}
});
$( "#accordion2" ).on( "accordionbeforeactivate", function( event, ui ) {
	$( "#accordion1" ).accordion({active: false});
	$( "#accordion3" ).accordion({active: false});
} );
});

$(function() {
$( "#accordion3" ).accordion({
collapsible: true,
active: false,
heightStyle: "content",
beforeActivate: function( event, ui ) {}
});
$( "#accordion3" ).on( "accordionbeforeactivate", function( event, ui ) {
	$( "#accordion2" ).accordion({active: false});
	$( "#accordion1" ).accordion({active: false});
} );
});

$(function() {
	$( ".pippo" ).dialog({autoOpen: false, resizable: false, modal: true});

});

function showInfo(id) {
	$('#'+id).dialog( "open" );
}

$(function(){
	$("#badge").each(function(){
		var input = $(this).clone();
		$( "#cat2" ).append(input);
	});
});

function showPanel() {
	$("#shower").hide();
	$("#hider").show();
	$("#accordion1").show();
}

function hidePanel() {
	$("#hider").hide();
	$("#shower").show();
	$("#accordion1").hide();
}
</script>
<title>Prova accordion</title>
</head>
<body>
<input id="shower" type="button" value="Mostra" onclick="showPanel()"/>
<input id="hider" type="button" value="Nascondi" onclick="hidePanel()" hidden="hidden"/>
<div id="accordion1" hidden="hidden">
<h3>Tutte</h3>
<div>
<div id="badge">
<input id="opener" type="image" src="img/badges_png/erasmus.png" height="100" width="100" value="Erasmus" onclick="showInfo('box')"/>
<div class="pippo" id="box" title="Erasmus Badge Info">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</div>
</div>
</div>
<h3>Per categoria</h3>
<div id="accordion2">
<h6>Università</h6>
<div id="cat1">
<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
</div>
<h3>Categoria 2</h3>
<div id="cat2">
</div>
</div>
<p>Per issuer</p>
<div id="accordion3">
<h3>Condivise</h3>
<div>
<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
</div>
<h3>Issuer 1</h3>
<div>
<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
</div>
</div>

</body>
</html>